<template>
    <div id="exercise2">
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'

onMounted(()=>{

    /** 1.创建场景对象Scene*/
    var scene = new THREE.Scene();

    var loader = new FBXLoader();
    loader.load('/static/model/空间建模.fbx',function (obj) {
        obj.scale.set(0.4,0.4,0.4);//网格模型缩放
        obj.children[0].material.color.set(0x00ff00); // 设置其中一个网格模型的颜色

        scene.add(obj);
    })

    var loader2 = new OBJLoader();
    loader2.load('/static/model/小音箱.obj',function (obj) {
        console.log(obj)
        obj.scale.set(200,200,200);//网格模型缩放
        obj.children[0].material.color.set(0xff0000);// 设置其中一个网格模型的颜色

        scene.add(obj);
    })


    /** 3.光源设置 */
    var point = new THREE.PointLight(0xffffff); //点光源
    point.position.set(400,400,400); //光源位置
    scene.add(point); //点光源添加到场景中
    var ambient = new THREE.AmbientLight(0xffffff); //环境光
    scene.add(ambient)



    /** 4.相机设置 */
    var width = 1200; //窗口宽度
    var height = 800;
    var k = width/height;
    var s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s*k, s*k, s, -s, 1, 1000);
    camera.position.set(200, 200, 200);// 设置相机位置
    camera.lookAt(scene.position); //设置相机方向（指向的场景对象）

    /**4.创建的渲染对象 */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.getElementById('exercise2').appendChild(renderer.domElement);

    renderer.render(scene, camera);

    // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
    var axisHelper = new THREE.AxesHelper(450);
    scene.add(axisHelper);

    /**鼠标操作 */
    function render() {
        renderer.render(scene,camera);//执行渲染操作
        requestAnimationFrame(render);
    }
    render();
    new OrbitControls(camera, renderer.domElement);//创建控件对象

})



</script>

<style lang="scss" scoped>

</style>